<template>
  <el-row>
    <el-col>
      <div class="text-sm text-gray-700">
        {{ $t('pageNetwork.linkStatus') }}
      </div>
      <div class="text-sm">Linkup</div>
    </el-col>
  </el-row>

  <h1 class="text-xl font-semibold leading-7 text-gray-900 mt-12 mb-3">
    {{ $t('pageNetwork.interfaceSection') }}
  </h1>

  <el-row>
    <el-col :span="6">
      <div class="text-sm">{{ $t('pageNetwork.fqdn') }}</div>
      <span class="text-sm">{{ fqdn }}</span>
    </el-col>
    <el-col :span="6">
      <span class="text-sm">{{ $t('pageNetwork.macAddress') }}</span>
      <el-button @click="editMacAddress" type="text" class="ml-1.5">
        <el-icon style="vertical-align: middle">
          <edit />
        </el-icon>
      </el-button>
      <div class="text-sm">{{ macAddress }}</div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue';
import { useNetworkStore } from '@/store/Settings/NetworkStore';

const networkStore = useNetworkStore();
const emit = defineEmits(['open-address']);

const props = defineProps<{ tabIndex: number }>();

const selectedInterface = ref();
const linkStatus = ref('');
const linkSpeed = ref('');
const fqdn = ref('');
const macAddress = ref('');

const ethernetData = computed(() => networkStore.ethernetData);

const editMacAddress = () => {
  emit('open-address');
};

const getSettings = () => {
  selectedInterface.value = props.tabIndex;
  linkStatus.value = ethernetData.value[selectedInterface.value].LinkStatus;
  linkSpeed.value = ethernetData.value[selectedInterface.value].SpeedMbps;
  fqdn.value = ethernetData.value[selectedInterface.value].FQDN;
  macAddress.value = ethernetData.value[selectedInterface.value].MACAddress;
};

getSettings();

watch(
  () => props.tabIndex,
  () => {
    getSettings();
  },
);
</script>
